<template>
  <div>
    <el-row style="justify-content: end">
      <div>
        <span
          style="
            display: inline-block;
            vertical-align: middle;
            width: 15px;
            height: 15px;
            background-color: #6f88ff;
          "
        ></span>
        <span
          style="
            display: inline-block;
            vertical-align: middle;
            font-size: 15px;
            margin-left: 8px;
          "
          >数据规律异常颜色</span
        >
      </div>
    </el-row>
    <el-tree
      :data="treeList"
      show-checkbox
      default-expand-all
      v-loading="loading"
      node-key="ruleId"
      @check="checkChange"
    />
  </div>
</template>

<script setup>
import { getTreeData, postRuleId } from "@/api/dataAnalysis/selectProject";
import bus from "@/utils/eventBus";
const route = useRoute();
const treeList = ref([]);
const jclbId = ref("");
const loading = ref(false);

function getList(jclb) {
  jclbId.value = jclb;
  treeList.value = [];
  loading.value = true;
  getTreeData({ jclbId: jclbId.value }).then((res) => {
    treeList.value = res.data;
    loading.value = false;
  });
}

const emits = defineEmits(["getColor"])

function checkChange(row,list) {
  let tempList = []
  list.checkedKeys.forEach((item, index) => {
    if (item) {
      tempList.push(item)
    }
  })
  if (tempList.length == 0) {
    emits("getColor", {data:[],class:"blueColor"})
    return
  }
  bus.emit("getLoading")
  postRuleId({
    ruleIds: tempList,
    jclbId: jclbId.value,
    projectId: route.query.projectId,
  }).then((res) => {
    emits("getColor", {data:res.data,class:"blueColor"})
  }).catch(() => {
  })
}

defineExpose({
  getList,
});
</script>
